<template>
	<view  style="padding:20rpx 20rpx 100rpx 20rpx;">

		<view class="u-padding-20">
			<view class="u-text-center">{{$t('ordersn')}}：<text class="u-font-40">{{orderNo}}</text></view>
		</view>
		<view class="u-flex u-flex-middle u-m-b-20" v-if="flow_list.pay_status==0&&flow_list.add_time*1000>new Date().getTime()-(2*1000*60*60)">
			<view class="u-p-l-10">{{$t('plstime1')}}</view>
			<count-down-time :timepoint="flow_list.add_time" :minute="2*1000*60*60"></count-down-time>
			<view class="u-p-r-10">{{$t('plstime2')}}</view>
		</view>
<button type="primary" class="no-border confirm-btn u-m-b-20"  v-if="flow_list.pay_status==0&&flow_list.add_time*1000>new Date().getTime()-(2*1000*60*60)" @tap="$tools.goJump('/pagesPackageA/order/pay',{order_code:orderNo},'','launch')">支付</button>

		<view v-for="(order_info, key) in flow_list.list">
		<view class="u-padding-20 u-m-b-10" v-if="key==0">
			<view class="">
				<text class="u-font-bold">{{$t('deliveryto')}}：</text>
					{{order_info.region_fullname}} {{order_info.address}} {{order_info.consignee}} {{order_info.mobile}}
				</view>
		</view>
		




		
		
			<image src="https://i.yodin.com/storage/app/images/top.png?2" mode="widthFix" style="width: 100%;"></image>


				<view class="section" v-if="order_info.operableItem.shipping.length!=0">
					<view class="tui-cell-class tui-list-cell">						
						<view class="u-flex u-flex-between u-flex-fill">
							<view class="u-flex-y u-flex-8">
								<u-radio-group v-model="operableShippingStatus" placement="row">
									<u-radio v-for="(oorder, index) in order_info.operableItem.shipping"
										:label="oorder.title"
										:key="index"
										:labelSize="14" :size="14"
										:customStyle="{marginRight: '16px'}"
										:name="oorder.value">
									</u-radio>
								</u-radio-group>
							</view>
							<view class="u-flex u-flex-end u-flex-4">
								<button type="primary" class="pay_btn u-m-b-20" size="mini" @tap="submitLog(order_info.order_id)">确认</button>
							</view>
						</view>
					</view>
				</view>
				<view class="section">
					<view class="tui-cell-class tui-list-cell">
				
						
						<view class="u-flex u-flex-between u-flex-fill">
							<view class="u-flex-y u-flex-8">
								<view class="u-font-lg u-m-b-10">{{order_info.groupname}}</view>
							</view>
							<view class="u-flex u-flex-end u-flex-4">
								<u--text align="right"
									:text="order_info.order_status_txt"
								></u--text>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="tui-cell-class tui-list-cell" v-for="(good, index) in order_info.order_detailed" :key="index">
							<view class="u-flex u-flex-fill">
								<view class="u-flex-y u-flex-8">
									<view class="u-font-lg u-m-b-10 ">{{ good.goods_name }}</view>
									<view class="u-font-sm  ">{{good.property}}</view>
								</view>
								<view class="u-flex u-flex-4 u-flex-between">
									<view class="">x{{ good.num }}</view>
									<view class="font-weight-bold">{{order_info.symbol}}{{ good.price }}</view>
								</view>
							</view>
					</view>
				</view>

				<view class="section" v-if="order_info.shopinfo.orderType_en=='takecheck'">
					<!-- order info begin -->
					<view class="tui-cell-class tui-list-cell" padding="30rpx">
						<view class="u-flex-y u-flex-fill">
							<view class="pay-cell">
								<view>{{$t('addtime')}}</view>
								<view class="font-weight-bold">{{ order_info.add_time }}</view>
							</view>
							<view class="pay-cell">
								<view>{{$t('ordersn')}}</view>
								<view class="font-weight-bold">{{order_info.order_code}}</view>
							</view>
						</view>
					</view>
					<!-- order info end -->
				</view>
				<view class="section" v-if="order_info.shopinfo.orderType_en=='takecheck'">
				<view class="tui-cell-class tui-list-cell">
					<view class="u-flex-y u-flex-fill">
					<view class="u-font-lg">二维码券</view>
					<view v-for="(ticket, index) in order_info.ticket" :key="index"  class="u-p-l-30 u-p-r-30" >
						<view class="u-m-b-20">{{ticket.title}}</view>
						<view class="ticket">
							<image mode="widthFix" :src="'data:image/png;base64,'+ticket.img.replace(/[\r\n]/g,'')" class="img"></image>
							<view :class="ticket.status==0?'ticketdisabled':''">
								<text class="txt" v-if="ticket.status==0">已使用</text>
							</view>
						</view>
					</view>
					</view>
				</view>
				</view>
				<view class="section">
					<view class="tui-cell-class tui-list-cell tui-cell-last">
						<view class="u-flex u-flex-between u-flex-fill">
								<view class="u-p-b-20 u-font-lg">{{$t('expressfee')}}</view>
								<view class="font-weight-bold">
								 {{order_info.symbol}}{{ order_info.shipping_fee }}
								</view>
						</view>
					</view>
				</view>

				
				<!-- order other info begin -->
				<view class="section">
				<view class="tui-cell-class tui-list-cell tui-cell-last">
					<view class="u-flex-y u-flex-fill">
							<view class="u-p-b-20 u-font-lg">{{$t('notes')}}</view>
							<view class="font-weight-bold">
							 {{ order_info.user_note }}
							</view>
						<u-gap height="20"></u-gap>
					<view class="" v-for="(log, index) in order_info.log" v-if="order_info.log.length > 0">
						<u-divider :text="$tools.dateFormat('YYYY-mm-dd HH:MM',log.add_time)" :dashed="true" lineColor="#ff0000"></u-divider>
							 <!--log.add_time | timeStamp-->
							 <view>{{log.action_desc}} <text class="u-p-l-20" v-if="log.action_note!=''"> ㊟ {{log.action_note}} </text></view>
					</view>
	<view>
	<view v-if="kd100path!=''">
	<u-divider text="快递100" :dashed="true"></u-divider>
	<!--#ifdef MP-WEIXIN-->
	<navigator target="miniProgram" open-type="navigate" app-id="wx6885acbedba59c14" :path="kd100path" extra-data="" version="release">查看快递信息</navigator>
	<!--#endif-->
	<!--#ifdef H5-->
		<u-button type="info" size="mini" @click="$Router.push({path:'/pages/componentsB/info/webview', query: {url:kd100h5path}})">查看快递信息</u-button>
	<!--#endif-->
	</view>
	</view>
					</view>
				</view>
				</view>

		<image src="https://i.yodin.com/storage/app/images/bottom.png?1" mode="widthFix" style="width: 100%;"></image>
	</view>

			<u-gap height="80"></u-gap>

		
	</view>
</template>

<script>

import { api_order_list,api_order_view,api_order_log_add } from '@/config/api.js';
import countDownTime from '@/pagesPackageA/components/count-down-time';
export default {
    components:{
        countDownTime
    },
	data() {
		return {
			loadstatus:true,
				orderNo:'',
				flow_list:[],
				kd100path:'',
				kd100h5path:'',
				operableShippingStatus:'0',
		};
	},
  onLoad(options) {
		//let query = JSON.parse(decodeURIComponent(options.query));
		uni.setNavigationBarTitle({title: this.$t('common.order_details')});
		this.orderNo = options.order_code;
		this.orderview(this.orderNo)
	},
	methods: {
		review() {
			const date = this.order.completed_time.split(' ')[0]
			uni.navigateTo({
				url: '/pages/componentsC/my/my?storename=' + this.order.store.name + '&typeCate=' + this.order.typeCate + '&date=' + date
			})
		},
		submitLog(orderid){
				api_order_log_add({
					order_id:orderid,
					order_status:'',
					pay_status:'',
					shipping_status:this.operableShippingStatus,
					user_note:''
				}).then(res => {
					this.orderview(this.orderNo)
				}).catch((e)=>{});
		},
    orderview() {
        api_order_view({
          orderNo: this.orderNo,
        }).then((res) => {
			console.log(res)
            this.flow_list = res;
			// if (this.order_info.express_order!=''){
			// 	this.kd100path="pages/result/result?nu="+this.order_info.express_order+"&com="+this.order_info.express_code+"&querysource=third_xcx"
			// 	this.kd100h5path="https://m.kuaidi100.com/app/query/?com="+this.order_info.express_code+"&nu="+this.order_info.express_order+"&coname="
			// }
            this.loadstatus = false;
          }).catch((e) => {});
    },
	}
};
</script>

<style lang="scss" scoped>
@mixin arch {
	content: "";
	position: absolute;
	background-color: #ffffff;
	width: 30rpx;
	height: 30rpx;
	bottom: -15rpx;
	z-index: 10;
	border-radius: 100%;
}
.tui-cell-class{
	background: #e9dfe5;
	padding:26rpx 30rpx;
	color:#4c6473
}
.tui-list-cell {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.tui-radius {
	border-radius: 12rpx;
	overflow: hidden;
}

.tui-cell-hover {
	background: #f7f7f9 !important;
}

.tui-list-cell::after {
	content: '';
	position: absolute;
	border-bottom: 2rpx solid #E9E9E9;
	-webkit-transform: scaleY(0.8);
	transform: scaleY(0.8);
	bottom: 0;
	right: 0;
	left: 0;
}
.tui-line-left::after {
	left: 30rpx !important;
}

.tui-line-right::after {
	right: 30rpx !important;
}

.tui-cell-last::after {
	border-bottom: 0 !important;
}


.bgcard{
	
}

.section {
	position: relative;
	
	&::before {
		@include arch;
		left: -15rpx;
	}
	
	&::after {
		@include arch;
		right: -15rpx;
	}
}

.pay-cell {
	
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	color: #5A5B5C;
	margin-bottom: 40rpx;

	&:nth-last-child(1) {
		margin-bottom: 0;
	}
}



.ticket{
	position: relative;
	.img{width: 100%;}
	.ticketdisabled{
		width: 100%;
		height: 100%;
		position: absolute;
		top:0px;left:0px;
		background:rgba(0,0,0,0.6);
		
		.txt{
			position: absolute;
			top:45%;
			margin: auto;
			text-align: center;
			width: 100%;
			color: #D12E32;
			font-size: 50rpx;
			background: #F1F1F1;
			height: 100rpx;
			line-height: 100rpx;
		}
	}
}

</style>
